<template>
  <div>
    <el-col >
      <div id="clock" align="center">
        <p class="date" align="center">{{ date }}</p>
      </div>
    </el-col>

  <el-calendar v-model="value" id="calendar">
    <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
    <template
      slot="dateCell"
      slot-scope="{date, data}">
      <!--自定义内容-->
      <div>
        <div class="calendar-day">{{ data.day.split('-').slice(2).join('-') }}</div>
        <div v-for="item in calendarData">
          <div v-if="(item.months).indexOf(data.day.split('-').slice(1)[0])!=-1">
            <div v-if="(item.days).indexOf(data.day.split('-').slice(2).join('-'))!=-1">
              <el-tooltip class="item" effect="dark" :content="item.things" placement="right">
                <div class="is-selected">{{item.things}}</div>
              </el-tooltip>
            </div>
            <div v-else></div>
          </div>
          <div v-else></div>
        </div>
      </div>

    </template>
  </el-calendar>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        date: '',
        week: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
        calendarData: [
          { months: ['08', '11'], days: ['11'], things: '我生日' },
          { months: ['10', '11'], days: ['02'], things: '去公园野炊' },
          { months: ['09'], days: ['28'], things: '她生日' },
          { months: ['10'], days: ['07'], things: '母亲生日' }
        ],
        value: new Date()
      };
    },
    mounted: function () {
      let _this = this;
      _this.$nextTick(function () {
        setInterval(_this.updateTime, 1000);
      })
    },

    methods: {

      updateTime: function () {
        let _this = this;
        let cd = new Date();
        _this.time = _this.zeroPadding(cd.getHours(), 2) + ':' +
          _this.zeroPadding(cd.getMinutes(), 2) + ':' +
          _this.zeroPadding(cd.getSeconds(), 2);
        _this.date = _this.zeroPadding(cd.getFullYear(), 4) + '-' +
          _this.zeroPadding(cd.getMonth() + 1, 2) + '-' +
          _this.zeroPadding(cd.getDate(), 2) + ' ' +
          _this.week[cd.getDay()];
      },

      zeroPadding: function (num, digit) {
        let zero = '';
        for (let i = 0; i < digit; i++) {
          zero += '0';
        }
        return (zero + num).slice(-digit);
      }
    }
  }
</script>
<style>
  .calendar-day{
    text-align: center;
    color: #202535;
    line-height: 30px;
    font-size: 12px;
  }
  .is-selected{
    color: #F8A535;
    font-size: 10px;
    margin-top: 5px;
  }
  #calendar .el-button-group>.el-button:not(:first-child):not(:last-child):after{
    content: '当月';
  }
</style>
